<template>

  <div class="formL-terminal-info-view">

    <el-form
      label-position="right"
      label-width="110px"
      :inline="true"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="终端名称:">
            <el-link style="display: flex;align-items: center" :underline="false" type="primary" @click="onClick">{{ datas.terminalName }}</el-link>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="所在地区:">
            <span>{{ datas.provinceName }}/{{ datas.cityName }}/{{ datas.areaName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="终端类型:">
            {{ getLabel('app_mode', datas.terminalType) }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

  </div>

  <detail-drawer ref="detailDrawer" custom-title :size-width="1000">
    <template #title>
      <div>
        <span>终端 - </span>
        <span class="drawerTitle">{{ datas.terminalName }}</span>
      </div>

    </template>
    <template #contents>

      <terminal-info :id="datas.terminalId" />

    </template>
  </detail-drawer>

</template>

<script>
import terminalInfo from '../../../../commonView/detailComponents/terminal/terminalInfo.vue'
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'TerminalInfoView',
  components: { terminalInfo },
  props: {
    datas: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    var data = reactive({
      detailDrawer: null
    })

    const onClick = () => {
      data.detailDrawer.open()
    }

    return {
      ...toRefs(data),

      onClick
    }
  }
})
</script>

<style scoped>

</style>
